<template>
	<div class="container">
		<canvas ref="canvasRef" class="canvas"></canvas>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const canvasRef = ref(null);
let c;
let mouse = { x: undefined, y: undefined };
// const gravity = 1;
// const friction = 0.89;
const colorsCircle = ["#00bdff", "#4d39ce", "#088eff"];

function randomIntFromRange(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomColor(colors) {
	return colors[Math.floor(Math.random() * colors.length)];
}

function Particle(x, y, radius, color) {
	this.x = x;
	this.y = y;
	this.radius = radius;
	this.color = color;
	this.radians = Math.random() * Math.PI * 2;
	this.velocity = 0.01;
	this.distanceFromCenter = randomIntFromRange(50, 200);
	this.lastMouse = { x: x, y: y };
	
	this.update = function () {
		const lastPoint = { x: this.x, y: this.y };
		
		this.lastMouse.x += (mouse.x - this.lastMouse.x) * 0.05;
		this.lastMouse.y += (mouse.y - this.lastMouse.y) * 0.05;
		
		this.radians += this.velocity;
		this.x = this.lastMouse.x + Math.cos(this.radians) * this.distanceFromCenter;
		this.y = this.lastMouse.y + Math.sin(this.radians) * this.distanceFromCenter;
		
		this.draw(lastPoint);
	};
	
	this.draw = function (lastPoint) {
		c.beginPath();
		c.strokeStyle = this.color;
		c.lineWidth = this.radius;
		c.moveTo(lastPoint.x, lastPoint.y);
		c.lineTo(this.x, this.y);
		c.stroke();
		c.closePath();
	};
}

let particleArray = [];

function init() {
	particleArray = [];
	for (let i = 0; i < 500; i++) {
		const radius = randomIntFromRange(2, 3);
		particleArray.push(new Particle(canvasRef.value.width / 2, canvasRef.value.height / 2, radius, randomColor(colorsCircle)));
	}
}

function animate() {
	requestAnimationFrame(animate);
	c.fillStyle = 'rgba(255,255,255,0.05)';
	c.fillRect(0, 0, innerWidth, innerHeight);
	particleArray.forEach(particle => particle.update());
}

onMounted(() => {
	const canvas = canvasRef.value;
	c = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	
	window.addEventListener("mousemove", (event) => {
		mouse.x = event.clientX;
		mouse.y = event.clientY;
	});
	
	window.addEventListener("resize", () => {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		init();
	});
	
	window.addEventListener("click", init);
	
	init();
	animate();
});
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
}

.canvas {
	display: flex;
}

.container {
	height: 100vh;
	overflow: hidden;
	background: #000;
}
</style>
